<!DOCTYPE html>
<html lang="en" layout:decorator="common/contentLayout"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<!--页面内容 继承自common/contentLayout.html-->
<div layout:fragment="content">
    <form class="layui-form">
        <div class="layui-form-item layui-inline">
            <div class="layui-inline">
                <div class="layui-input-inline" style="width: 150px">
                    <select name="statusFlag" id="statusFlag" class="search-select">
                        <option value="">请选择在线状态</option>
                        <option value ="0">离线</option>
                        <option value="1">在线</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">服务版本号:</label>
                <div class="layui-input-inline">
                    <input type="text" value="" id="serverVersion" name="serverVersion" class="layui-input search_input"/>
                </div>
            </div>

            <button class="layui-btn" type="button" lay-submit lay-filter="refreshList" id="searchList">查询</button>
            <button class="layui-btn" type="button" lay-submit lay-filter="refreshList" id="refreshList">刷新</button>
        </div>

    </form>



    <table class="layui-table" lay-data="{height:'full', url:'/server/list/data', page:true,limit: 10, id:'serverTableId',
    toolbar:'#serverToolbar'}" lay-filter="serverTableId">
        <thead>
        <tr>
            <th lay-data="{type:'checkbox', align: 'center'}"></th>
            <th lay-data="{field: 'id', align: 'center', sort: true,width:80}" rowspan="2">id</th>
            <th lay-data="{field: 'ip', align: 'center', sort: true}" rowspan="2">ip</th>
            <th lay-data="{field: 'port', align: 'center', sort: true}" rowspan="2">port</th>
            <th lay-data="{field: 'serverType', align: 'center',templet:'#serverTypeFlagTpl', sort: true}" rowspan="2">服务类型</th>
            <th lay-data="{field: 'statusFlag', align: 'center', templet: '#switchTpl', sort: true}" rowspan="2">statusFlag</th>
            <th lay-data="{field: 'serverVersion', align: 'center', sort: true}" rowspan="2">服务版本号</th>
            <th lay-data="{field: 'heartTime', align: 'center', sort: true}" rowspan="2">心跳时间</th>
            <th lay-data="{field: 'insertTime', align: 'center', sort: true}" rowspan="2">插入时间</th>
            <th lay-data="{field: 'updateBy', align: 'center', sort: true}" rowspan="2">修改者</th>
        </tr>
        </thead>
    </table>
</div>

<div layout:fragment="end-load-files">
    <script type="text/html" id="serverTypeFlagTpl">
        {{#  if(d.serverType == 1){ }}
        broker
        {{#  } else { }}
        portal
        {{#  } }}
    </script>

    <script type="text/html" id="switchTpl">
        <input type="checkbox" name="statusFlag" id="{{d.id}}" value="{{d.statusFlag}}" lay-skin="switch" lay-text="up|down" lay-filter="statusFlag" {{ d.statusFlag == 1 ? 'checked' : '' }}>
    </script>

    <script type="text/html" id="serverToolbar">
        <div class="layui-inline">
            <button class="layui-btn layui-btn-danger" lay-event="batchPull" id="batchPull">批量拉入</button>
            <button class="layui-btn layui-btn-danger" lay-event="batchPush" id="batchPush">批量拉出</button>
        </div>

    </script>

    <script>
        layui.use(['element', 'table', 'jquery', 'layer', 'form'], function () {
            var table = layui.table,
                form = layui.form,
                layer = layui.layer,
                $ = layui.$,
                element = layui.element;

            $("body").on("click", "#refreshList", function () {
                table.reload("serverTableId", {
                    where: {
                    }
                });

            });

            $("body").on("click", "#searchList", function () {
                getServerList();
            });

            function getServerList(){
                table.reload("serverTableId", {
                    where: {
                        statusFlag: $("#statusFlag").val(),
                        serverVersion:$("#serverVersion").val()
                    },page: {
                        curr: 1
                    }
                });
            }

            //监听
            form.on('switch(statusFlag)', function(obj){
                changeStatusFlag(this.id);
            });

            function changeStatusFlag(id) {
                $.post("/server/changeStatusFlag",'serverId='+id, requestCallback);
            }

            // 头工具栏事件
            table.on('toolbar(serverTableId)', function(obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;
                switch (obj.event) {
                    case 'batchPull':
                        BatchPullOrPush(data,'/server/batchPull',"批量拉入");
                        break;

                    case 'batchPush':
                        BatchPullOrPush(data,'/server/batchPush',"批量拉出");
                        break;

                }
                ;

            });


            function BatchPullOrPush(data,url,pullOrPush) {

                if (data.length == 0) {
                    layer.alert("请选择！");
                    return;
                }
                var servers = [];
                for (var i = 0; i < data.length; i++) {
                    servers.push(data[i])
                }

                layer.confirm("确认要"+pullOrPush+"?", {
                    icon : 3,
                    title : '不可逆操作！'
                }, function(index) {
                    $.post(url,
                        'servers='
                        + JSON.stringify(servers),
                        function(data) {
                            if (data.suc) {
                                successBox(pullOrPush+"成功");
                            } else {
                                failBox(pullOrPush+"失败,"+data.msg);
                            }

                        });
                    layer.close(index);
                })
            }


            function requestCallback(result, xhr) {
                if (xhr === 'success') {
                    if (result.code === '0') {
                        successBox(result.msg);
                    } else {
                        failBox(result.msg);
                    }
                } else {
                    failBox("网络异常！"+xhr);
                }
            }

            function successBox(msg) {
                getServerList();
                layer.msg(msg, {icon: 1})
            }

            function failBox(msg) {
                layer.alert(msg, {icon: 2})
            }


        });

    </script>

</div>
</html>